<template>
  <div class="trigger-action-form">
    <el-form ref="triggerActionFormRef" label-width="110px" :model="triggerActionForm" :rules="rules" hide-required-asterisk>
      <el-form-item required>
        <template v-if="actionType !== 0">
          <el-form-item label="告警接收人：" label-width="120px" required>
            <el-select
              placeholder="请选择告警接收人"
              v-model="triggerActionForm.triggerRecieverType"
              :disabled="shareData.isDisable"
              size="small"
              style="width: 65%;"
              @change="handleChange"
            >
              <el-option label="按个人" :value="0"></el-option>
              <el-option label="按角色" :value="1"></el-option>
              <el-option label="按部门" :value="2"></el-option>
            </el-select>
            <template v-if="triggerActionForm.triggerRecieverType === 0">
              <el-form-item prop="personsList" :rules="[{ required: true, message: '请选择人员', trigger: 'change' }]">
                <el-select
                  v-model="triggerActionForm.personsList"
                  multiple
                  collapse-tags
                  size="small"
                  style="width: 65%;"
                  filterable
                  clearable
                  placeholder="请选择人员"
                  @change="handleChange"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.userNo"
                    :label="item.userName"
                    :value="item.userNo"
                    :disabled="shareData.isDisable"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else-if="triggerActionForm.triggerRecieverType === 1">
              <el-form-item prop="rolesList" :rules="[{ required: true, message: '请选择角色', trigger: 'change' }]">
                <el-select
                  v-model="triggerActionForm.rolesList"
                  multiple
                  collapse-tags
                  size="small"
                  style="width: 65%;"
                  filterable
                  clearable
                  placeholder="请选择角色"
                  @change="handleChange"
                >
                  <el-option
                    v-for="item in roleList"
                    :key="item.roleNo"
                    :label="item.roleName"
                    :value="item.roleNo"
                    :disabled="shareData.isDisable"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item prop="departsList">
                <el-tree
                  ref="tree"
                  :data="departList"
                  :disabled="shareData.isDisable"
                  show-checkbox
                  node-key="no"
                  size="small"
                  style="width: 65%;"
                  :default-expand-all="shareData.title === '查看自定义告警' ? true : false"
                  @check="handleChange('部门')"
                  :props="defaultProps">
                </el-tree>
              </el-form-item>
            </template>
          </el-form-item>
        </template>
        <template v-if="actionType === 2">
          <el-form-item prop="ordersTypeNo" label="工单类型：" label-width="120px" style="margin-top: -10px" :rules="[{ required: true, message: '请选择工单类型', trigger: 'change' }]">
            <el-select
              placeholder="请选择工单类型"
              v-model="triggerActionForm.ordersTypeNo"
              :disabled="shareData.isDisable"
              size="small"
              style="width: 65%;"
              @change="handleChange"
            >
              <el-option v-for="item in workTypeList" :key="item.typeNo" :label="item.typeName" :value="item.typeNo"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="ordersLevel" label="工单等级：" label-width="120px" :rules="[{ required: true, message: '请选择工单等级', trigger: 'change' }]">
            <el-select
              placeholder="请选择工单等级"
              v-model="triggerActionForm.ordersLevel"
              :disabled="shareData.isDisable"
              size="small"
              style="width: 65%;"
              @change="handleChange"
            >
              <el-option v-for="item in ordersLevelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="冻结期限：" label-width="120px" class="frozen">
          <el-form-item prop="frozenTerm" style="width: 15%">
            <el-input
              placeholder="冻结期限"
              v-model="triggerActionForm.frozenTerm"
              :disabled="shareData.isDisable"
              style="width: 100%"
              size="small"
              @change="handleChange"
            />
          </el-form-item>
          <el-select
            v-model="triggerActionForm.frozenTermSuffix"
            :disabled="shareData.isDisable"
            size="small"
            style="width: 15%; margin: 0 10px"
            @change="handleChange"
          >
            <el-option label="时" :value="'h'"></el-option>
            <el-option label="分" :value="'m'"></el-option>
            <el-option label="秒" :value="'s'"></el-option>
          </el-select>
          <span v-if="actionType !==2">
            内生成一次告警
          </span>
          <span v-else>
            内生成一次告警和工单
          </span>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getUserList, getRoleList, getDepartList } from '../../js/alarmStrategy'
// 自定义冻结期限
const validateFrozenTerm = (rule, value, callback) => {
  const reg = /^[1-9]\d*$/
  if (!value || String(value).trim() === '') {
    callback(new Error('请输入冻结期限'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入正整数'))
  } else {
    callback()
  }
}
// 校验表单
const rules = {
  frozenTerm: [
    { validator: validateFrozenTerm, trigger: 'blur' }
  ]
}
export default {
  name: 'TriggerActionForm',
  inject: ['shareData'],
  props: {
    actionType: {
      type: Number,
      default: 0
    },
    modelValue: {
      type: Object
    },
    workTypeList: {
      type: Array,
      default: () => ([])
    }
  },
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  watch: {
    'triggerActionForm.triggerRecieverType': {
      immediate: true,
      deep: true,
      handler () {
        if (this.triggerActionForm.triggerRecieverType === 0) {
          this.triggerActionForm.rolesList = []
          if (this.$refs.tree) {
            this.$refs.tree.setCheckedKeys([])
          }
        } else if (this.triggerActionForm.triggerRecieverType === 1) {
          this.triggerActionForm.personsList = []
          if (this.$refs.tree) {
            this.$refs.tree.setCheckedKeys([])
          }
        } else if (this.triggerActionForm.triggerRecieverType === 2) {
          // 部门
          this.triggerActionForm.personsList = []
          this.triggerActionForm.rolesList = []
          this.$nextTick(() => {
            if (this.$refs.tree) {
              this.$refs.tree.setCheckedKeys(this.triggerActionForm.departsList)
            }
          })
        }
      }
    },
    actionType: {
      handler () {
        this.resetFieldValue()
      }
    }
  },
  data () {
    return {
      triggerActionForm: {
        frozenTermSuffix: 'm',
        triggerRecieverType: 0,
        frozenTerm: null,
        personsList: [],
        rolesList: [],
        departsList: [],
        ordersLevel: null,
        ordersTypeNo: null
      },
      rules,
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      userList: [],
      roleList: [],
      departList: [],
      ordersLevelList: [
        { id: 1, name: '一星' },
        { id: 2, name: '二星' },
        { id: 3, name: '三星' },
        { id: 4, name: '四星' },
        { id: 5, name: '五星' }
      ]
    }
  },
  methods: {
    resetFieldValue () {
      this.triggerActionForm.frozenTermSuffix = 'm'
      this.triggerActionForm.triggerRecieverType = 0
      this.triggerActionForm.frozenTerm = null
      this.triggerActionForm.personsList = []
      this.triggerActionForm.rolesList = []
      this.triggerActionForm.departsList = []
      this.triggerActionForm.ordersLevel = null
      this.triggerActionForm.ordersTypeNo = null
    },
    async getUserList () {
      // 获取按个人下拉数据
      try {
        const res = await getUserList({})
        if (res.code === 0) {
          this.userList = res.data
        }
      } catch (e) {}
    },
    async getRoleList () {
      // 获取按角色下来数据
      try {
        const res = await getRoleList()
        if (res.code === 0) {
          this.roleList = res.data
        }
      } catch (e) {}
    },
    async getDepartList () {
      // 获取按部门树形数据
      try {
        const res = await getDepartList({})
        if (res.code === 0) {
          this.departList = res.data
        }
      } catch (e) {}
    },
    handleChange (type) {
      if (type === '部门') {
        this.triggerActionForm.departsList = this.$refs.tree.getCheckedKeys()
      }
      this.$emit('change', this.triggerActionForm)
    }
  },
  mounted () {
    this.getUserList()
    this.getRoleList()
    this.getDepartList()
    if (this.shareData.title !== '新增自定义告警') {
      this.triggerActionForm = { ...this.triggerActionForm, ...this.modelValue }
    }
  }
}
</script>
<style lang="scss" scoped>
.trigger-action-form {
  ::v-deep {
    .frozen {
      .el-form-item__content {
        display: flex;
      }
    }
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__content {
        .el-form-item__error {
          padding-top: 0;
        }
        margin-bottom: 10px;
      }
    }
  }
}
</style>
